<%@ page import="org.xilin.Family" %>
<%@ page import="org.xilin.User" %>
<g:setProvider library="jquery"/>


<g:if test="${flash.message}">
  <div class="message">${flash.message}</div>
</g:if>
<div class="bar">
  <span class="left">Family</span>
  <span class="btn right">
    <a class="create" href="#" title="Edit Family" rel="${request.contextPath}/family/edit/${familyInstance.userId}">Update Family</a>
  </span>
</div>
<div>
  <table border=1 style="WIDTH: 800px; HEIGHT: 22px" cellSpacing=1 cellPadding=1 width=800  align=center>
    <caption><b>User Information</b></caption>
    <tbody>
      <tr>
        <td width=150 class="name"><label for='userId'>User Name :</label></td>
        <td valign='top'> ${fieldValue(bean: familyInstance, field : "userId")}</td>
        <td width=120 class="name"><label for='email'>E-mail Address :</label></td>
        <td valign="top" class="value">${loggedInUserInfo(field:"email")}</td>
      </tr>
      <tr>
        <td COLSPAN=6 style="FONT-SIZE: xx-small" valign=center>
          <HR>
        </td>
      </tr>
      <tr>
        <td COLSPAN=6 valign=center>
          <CENTER>	<B>Father Information</B> </CENTER>
        </td>
      </tr>
      <tr valign=center>
        <td  width=120 class="name"><label for='fatherLastName'>Last Name :</label></td>
        <td class="value">${fieldValue(bean: familyInstance, field: "fatherLastName")}</td>
        <td width=120 class='name'><label for='fatherFirstName'>First Name :</label></td>
        <td class="value">${fieldValue(bean: familyInstance, field: "fatherFirstName")}</td>
        <td width=120 class='name'><label for='fatherChineseName'>Chinese Name :</label></td>
        <td class="value">${fieldValue(bean: familyInstance, field: "fatherChineseName")}</td>
      </tr>
      <tr>
        <td COLSPAN=6 valign=center>
          <CENTER>	<B>Mother Information</B> </CENTER>
        </td>
      </tr>
      <tr valign=center>
        <td  width=120 class="name"><label for='motherLastName'>Last Name :</label></td>
        <td class="value">${fieldValue(bean: familyInstance, field: "motherLastName")}</td>
        <td width=120 class='name'><label for='motherFirstName'>First Name :</label></td>
        <td class="value">${fieldValue(bean: familyInstance, field: "motherFirstName")}</td>
        <td width=120 class='name'><label for='motherChineseName'>Chinese Name :</label></td>
        <td class="value">${fieldValue(bean: familyInstance, field: "motherChineseName")}</td>
      </tr>
      <tr>
        <td COLSPAN=6 valign=center>
           <CENTER>	<B>Address</B> </CENTER>
        </td>
      </tr>
      <tr>
        <td class="value">${fieldValue(bean: familyInstance, field: "address")}</td>
        <td class='value'>${fieldValue(bean: familyInstance, field: "city")},</td>
        <td class='value'>${fieldValue(bean: familyInstance, field: "state")} ${fieldValue(bean: familyInstance, field: "zipCode")}</td>
      </tr>
      <tr>
        <td COLSPAN=6 valign=center>
          <CENTER>	<B>Phone Number</B> </CENTER>
        </td>
      </tr>
      <tr valign=center>
        <td width=120 class='name'><label for='homePhone'>Home Phone :</label></td>
        <td class='value'>${fieldValue(bean: familyInstance, field: "homeTel_1")}-${fieldValue(bean: familyInstance, field: "homeTel_2")}-${fieldValue(bean: familyInstance, field: "homeTel_3")}</td>
        <td width="100" valign='top' class='name'><label for='workPhone'>Work Phone :</label></td>
        <td class='value'>${fieldValue(bean: familyInstance, field: "workTel_1")}-${fieldValue(bean: familyInstance, field: "workTel_2")}-${fieldValue(bean: familyInstance, field: "workTel_3")} ext ${fieldValue(bean: familyInstance, field: "workTel_ext")}</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">
    $(".create").cluetip({activation:'click', sticky:true, closePosition:'title', width:'700px'});
</script>